<template>
  <div class="task-issued">
    <div class="shade"></div>
    <div class="popup">
      <div class="title justify-content-between">
        <span class="fs28 colorFFF">任务下发</span>
        <img src="../assets/images/icon-close.png" @click="cancel" />
      </div>
      <div class="content">
        <div class="c-title">{{ taskData.taskName }}</div>
        <div class="add-box">
          <div class="add-list">
            <div class="label">可分配任务：</div>
            <div class="checks equipment">
              <el-checkbox-group v-model="taskCheck" @change="taskChange">
                <el-checkbox
                  v-for="(item, index) in taskList"
                  :key="index"
                  :label="item.id"
                  >{{ item.matchName }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
          <div class="add-list">
            <div class="label">操作终端：</div>
            <div class="checks">
              <el-radio-group v-model="terminal" @change="terminalChange">
                <el-radio
                  v-for="(item, index) in terminalData"
                  :key="index"
                  :label="item.code"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
          <div class="add-btns justify-content-center">
            <div
              class="btn sure"
              v-loading="submitLoading"
              @click="addTaskGroup"
            >
              提交
            </div>
            <div class="btn cancel" @click="resetAddBox">重置</div>
          </div>
        </div>
        <div class="theader justify-content-between">
          <div class="w200"></div>
          <div class="w500">序号</div>
          <div class="w7000">设备编号</div>
          <div class="w1300">操作终端</div>
          <div class="w500">删除</div>
        </div>
        <div class="tbodys" v-loading="listLoading">
          <div
            class="tbody justify-content-between"
            v-for="(item, index) in issuedData"
            :key="index"
          >
            <div class="w200">
              <el-checkbox
                v-model="item.checked"
                :disabled="item.disabled"
              ></el-checkbox>
            </div>
            <div class="w500">{{ index + 1 }}</div>
            <div class="w7000 align-item-center">
              <div class="stages">
                <div
                  class="stage-item"
                  v-for="(x, y) in item.matchNames"
                  :key="y"
                >
                  <span>{{ x }}</span>
                </div>
              </div>
            </div>
            <el-tooltip placement="bottom" effect="light">
              <div slot="content" class="fs18">{{ item.optClientName }}</div>
              <div class="w1300 text-center text-overflow cursor-pointer">
                {{ item.optClientName }}
              </div>
            </el-tooltip>
            <div class="w500 justify-content-center">
              <img
                :src="item.iconDelShow"
                class="del"
                v-if="!item.disabled"
                @click="delGroupData(item.id, index)"
                @mouseover="item.iconDelShow = iconDelActive"
                @mouseleave="item.iconDelShow = iconDel"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="btns justify-content-center">
        <div class="btn sure" v-loading="saveLoading" @click="issued">下发</div>
        <div class="btn cancel" @click="cancel">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/assets/js/bus.js";
export default {
  name: "TaskIssued",
  props: {
    taskData: Object,
  },
  data() {
    return {
      iconDel: require("../assets/images/icon-del-small-gray.png"),
      iconDelActive: require("../assets/images/icon-del-small.png"),
      taskCheck: [], //可分配任务选择数据
      taskList: [], //可分配任务
      taskListName: [], //可分配任务名称
      terminal: "", //操作终端选择数据
      terminalName: "",
      terminalData: [], //操作终端数据
      submitLoading: false, //提交加载中动画
      listLoading: false, //请求列表数据加载中动画
      saveLoading: false, //下发请求中动画
      issuedData: [], //分组列表数据
    };
  },
  created() {
    this.getTaskCanUseList();
    this.getTerminal();
    this.getGroupData();
  },
  methods: {
    /**
     * 关闭弹窗
     * @param {Number} refresh - 是否刷新列表 1是
     */
    cancel() {
      this.$emit("cancel");
    },
    // 查询可分配任务
    getTaskCanUseList() {
      let _this = this;
      let params = {
        taskId: _this.taskData.id,
      };
      _this.axios
        .getTaskCanUse(params)
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            _this.taskList = res.data.list;
          }
        })
        .catch(function (error) {
          _this.$message.error(error.msg);
        });
    },
    // 查询操作终端
    getTerminal() {
      let _this = this;
      _this.axios
        .getTerminal({})
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            _this.terminalData = res.data;
          }
        })
        .catch(function (error) {
          _this.$message.error(error.msg);
        });
    },
    taskChange(e) {
      let _this = this;
      _this.taskListName = [];
      e.map((item) => {
        _this.taskList.map((x) => {
          if (item == x.id) {
            _this.taskListName.push(x.matchName);
          }
        });
      });
    },
    terminalChange(e) {
      let _this = this;
      _this.terminalData.map(item => {
        if (item.code == e) {
          _this.terminalName = item.name
        }
      })
    },
    // 新增任务下发
    addTaskGroup() {
      let _this = this;
      let params = {
        optClientCode: _this.terminal,
        optClientName: _this.terminalName,
        matchIds: _this.taskCheck.toString(),
        matchNames: _this.taskListName.toString(),
        taskId: _this.taskData.id,
      };
      params.modelState = params.modelState == "" ? null : params.modelState;
      if (_this.taskCheck.length == 0) {
        _this.$message({
          message: "请选择可分配任务",
          type: "warning",
        });
      } else if (_this.terminal == "") {
        _this.$message({
          message: "请选择操作终端",
          type: "warning",
        });
      } else {
        _this.submitLoading = true;
        _this.axios
          .addTaskIssued(params)
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              _this.getGroupData();
            } else {
              _this.$message.error(res.msg);
            }
            _this.submitLoading = false;
          })
          .catch(function (error) {
            _this.submitLoading = false;
            _this.$message.error(error.msg);
          });
      }
    },
    // 重置新增条件
    resetAddBox() {
      this.taskCheck = [];
      this.taskListName = [];
      this.terminal = [];
      this.terminalName = [];
    },
    // 查询下发分组情况
    getGroupData() {
      let _this = this;
      let params = {
        taskId: _this.taskData.id,
      };
      _this.listLoading = true;
      _this.axios
        .getTaskGroup(params)
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            res.data.map((item) => {
              if (item.sendStatus.code == "N") {
                item.checked = false;
                item.disabled = false;
              } else {
                item.checked = true;
                item.disabled = true;
              }
              item.iconDelShow = _this.iconDel;
              item.matchIds = item.matchIds ? item.matchIds.split(",") : "";
              item.matchNames = item.matchNames
                ? item.matchNames.split(",")
                : "";
              return item;
            });
            _this.issuedData = res.data;
          }
          _this.listLoading = false;
        })
        .catch(function (error) {
          _this.listLoading = false;
          if (error.msg) _this.$message.error(error.msg);
        });
    },
    /**
     * 编辑下发分组
     * @param {Number} type - 编辑类型
     * @param {Number} index - 编辑下标
     * @param {Number} y - 删除设备编号下标
     */
    editGroupData(type, index, y) {
      let _this = this;
      let temp = _this.issuedData[index];
      if (temp.sendStatus.code == "N") {
        if (type == 1) {
          temp.deviceNo.splice(y, 1);
        } else if (type == 2) {
          temp.deviceNo = [];
        } else if (type == 3) {
          temp.modelState.splice(y, 1);
        } else if (type == 4) {
          temp.operatorClient = "";
        }
        let params = {
          deviceId: temp.deviceId,
          id: temp.id,
          deviceNo: temp.deviceNo.toString(),
          modelState: temp.modelState.toString(),
          operatorClient: temp.operatorClient,
        };
        _this.listLoading = true;
        _this.axios
          .editIssuedGroup(params)
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              _this.getGroupData();
            }
            _this.listLoading = false;
          })
          .catch(function (error) {
            _this.listLoading = false;
            _this.$message.error(error.msg);
          });
      } else {
        _this.$message({
          message: "已下发数据不允许修改",
          type: "warning",
        });
      }
    },
    /**
     * 删除下发分组
     * @param {Number} id - 删除id
     * @param {Number} index - 删除数据下标
     */
    delGroupData(id, index) {
      let _this = this;
      let temp = _this.issuedData[index];
      _this.listLoading = true;
      _this.axios
        .delTaskGroup({
          id: id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            _this.getGroupData();
          }
          _this.listLoading = false;
        })
        .catch(function (error) {
          _this.listLoading = false;
          _this.$message.error(error.msg);
        });
    },
    // 下发
    issued() {
      let _this = this;
      let newArr = _this.issuedData.map((item) => {
        if (item.sendStatus.code == "N" && item.checked == true) {
          return item.id;
        } else {
          return "";
        }
      });
      var ids = newArr.filter((item) => {
        return item && String(item).trim();
      });
      if (ids.toString() == "") {
        _this.$message({
          message: "请选择下发数据",
          type: "warning",
        });
      } else {
        let params = {
          groupIds: ids.toString(),
        };
        _this.saveLoading = true;
        _this.axios
          .issuedTaskGroup(params)
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              _this.getGroupData();
              _this.$message({
                message: res.msg,
                type: "success",
              });
              Bus.$emit("refreshTaskList");
              Bus.$emit("refreshTaskView");
            } else {
              _this.$message.error(res.msg);
            }
            _this.saveLoading = false;
          })
          .catch(function (error) {
            _this.saveLoading = false;
            _this.$message.error(error.msg);
          });
      }
    },
  },
};
</script>

<style scoped lang='less'>
.task-issued {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .shade {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
  }
  .popup {
    width: 12.43rem;
    height: 7.46rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 0.05rem 0.15rem 0 rgba(0, 21, 54, 0.25);
    .title {
      width: 100%;
      height: 0.58rem;
      background-color: #285fe3;
      padding: 0 0.25rem 0 0.4rem;
      img {
        width: 0.23rem;
        height: 0.23rem;
        cursor: pointer;
      }
    }
    .content {
      width: 100%;
      padding: 0 0.4rem;
      .c-title {
        width: 100%;
        height: 0.49rem;
        line-height: 0.49rem;
        color: #161d2e;
        font-size: 0.18rem;
      }
      .add-box {
        width: 100%;
        height: 2.34rem;
        border: 1px solid #d0d6e3;
        border-radius: 0.03rem;
        padding: 0 0.16rem;
        position: relative;
        overflow-y: scroll;
        .add-list {
          width: 100%;
          min-height: 0.5rem;
          display: flex;
          align-items: center;
          border-top: 1px solid #d0d6e3;
          .label {
            width: 1.1rem;
            font-size: 0.18rem;
            color: #505971;
          }
          .checks {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            flex: 1;
          }
          .equipment {
            padding-bottom: 0.15rem;
          }
          .equipment .el-checkbox {
            margin-right: 0.08rem;
            margin-top: 0.17rem;
          }
        }
        .add-list:first-child {
          border-top: 0;
        }
        .add-btns {
          width: 100%;
          margin-top: 0.16rem;
          margin-bottom: 0.13rem;
          .btn {
            width: 0.82rem;
            height: 0.32rem;
            margin-left: 0.68rem;
            line-height: 0.32rem;
            text-align: center;
            border-radius: 0.03rem;
            font-size: 0.18rem;
            cursor: pointer;
          }
          .btn.sure {
            background: linear-gradient(0deg, #074df3 0%, #3183ff 100%);
            color: #fff;
          }
          .btn.cancel {
            border: 1px solid #316eff;
            background: linear-gradient(0deg, #dadee8 0%, #feffff 100%);
            color: #505971;
          }
          .btn:first-child {
            margin-left: 0;
          }
        }
      }
      .add-box::-webkit-scrollbar {
        display: none;
      }
      .add-box {
        scrollbar-width: none;
        -ms-overflow-style: none;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .theader {
        width: 100%;
        height: 0.36rem;
        margin-top: 0.1rem;
        background: #f4f5f8;
        border: 1px solid #d0d6e3;
        border-radius: 0.03rem;
        padding: 0 0.2rem 0 0.2rem;
        font-size: 0.18rem;
        color: #505971;
        div {
          text-align: center;
        }
      }
      .tbodys {
        width: 100%;
        height: 2.52rem;
        overflow-y: scroll;
      }
      .tbodys::-webkit-scrollbar {
        display: none;
      }
      .tbodys {
        scrollbar-width: none;
        -ms-overflow-style: none;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .tbody {
        width: 100%;
        min-height: 0.6rem;
        border: 1px solid #d0d6e3;
        border-radius: 0.03rem;
        padding: 0 0.2rem 0 0.2rem;
        margin-top: 0.03rem;
        font-size: 0.18rem;
        color: #505971;
        .stages {
          display: flex;
          flex-wrap: wrap;
        }
        .stage-item {
          height: 0.24rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 0.15rem;
          border: 1px solid #aab3c4;
          border-radius: 0.03rem;
          margin-right: 0.08rem;
          margin-top: 0.02rem;
          span {
            font-size: 0.18rem;
            color: #505971;
          }
          img {
            width: 0.13rem;
            height: 0.13rem;
            cursor: pointer;
          }
        }
        .stage-item:hover {
          border: 1px solid #316eff;
        }
        .clear {
          font-size: 0.18rem;
          color: #285fe3;
          text-decoration: underline;
          margin-left: 0.12rem;
          cursor: pointer;
          flex-shrink: 0;
        }
        .tags {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }
        .tag {
          width: 1.1rem;
          height: 0.24rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 0.08rem 0 0.1rem;
          border: 1px solid #aab3c4;
          border-radius: 0.03rem;
          margin-top: 0.02rem;
          span {
            font-size: 0.18rem;
            color: #505971;
          }
          img {
            width: 0.13rem;
            color: 0.13rem;
            cursor: pointer;
          }
        }
        .tag:hover {
          border: 1px solid #316eff;
        }
        .del {
          width: 0.27rem;
          height: 0.3rem;
          cursor: pointer;
        }
      }
      .w200 {
        width: 2%;
      }
      .w500 {
        width: 5%;
        text-align: center;
      }
      .w7000 {
        width: 70%;
      }
      .w1300 {
        width: 13%;
      }
    }
    .btns {
      width: 100%;
      position: absolute;
      bottom: 0.36rem;
      .btn {
        width: 1.3rem;
        height: 0.4rem;
        margin-left: 1.12rem;
        line-height: 0.4rem;
        text-align: center;
        border-radius: 0.03rem;
        font-size: 0.22rem;
        cursor: pointer;
      }
      .btn.sure {
        background: linear-gradient(0deg, #00a366 0%, #00c37a 100%);
        color: #fff;
      }
      .btn.cancel {
        border: 1px solid #316eff;
        background: linear-gradient(0deg, #d9dde8 0%, #ffffff 100%);
        color: #505971;
      }
      .btn:first-child {
        margin-left: 0;
      }
    }
  }
}

/deep/ .el-checkbox__label {
  font-size: 0.18rem;
}
/deep/ .el-radio__label {
  font-size: 0.18rem;
}
</style>